<!DOCTYPE html>
<!-- saved from url=(0034)http://wu_xiao_jing.gitee.io/slim/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
		<meta charset="ut f-8">
		<title>SVG3</title>
		<style>
			:root {
  --blue: linear-gradient(to bottom right, #56CCF2, #2F80ED);
  --orange: linear-gradient(to bottom right, #f46b45, #eea849);
  --bg: #fff;
  --size: 150px;
  --duration: 4000ms;
}

body {
  background: var(--bg);
}

.loader {
  display: block;
  position: static;
  top: calc( 50% - var(--size)/2 );
  left: calc( 50% - var(--size)/2 );
  width: var(--size);
  height: var(--size);  
  border-radius: 10%;
  background: var(--orange);
  overflow: hidden;
  animation: rotate calc(var(--duration)*2) cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
  
       &::before,
       &::after {
    content: "";
    display: block;
    position: static;
    top: 0;
    left: 0;
    width: 50%;
    height: 50%;
    background: var(--blue);
    animation: slide var(--duration) cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
  }
  
  &::after {
    animation-delay: calc( (var(--duration) / 2) * -1 );
  }
}

@keyframes rotate {
  0%, 7.5% {
    transform: rotate( 0deg );
  }
  12.5%, 20% {
    transform: rotate( 45deg );
  }
  25%, 32.5% {
    transform: rotate( 90deg );
  }
  37.5%, 45% {
    transform: rotate( 135deg );
  }
  50%, 57.5% {
    transform: rotate( 180deg );
  }
  62.5%, 70% {
    transform: rotate( 225deg );
  }
  75%, 82.5% {
    transform: rotate( 270deg );
  }
  87.5%, 95% {
    transform: rotate( 315deg );
  }
  100% {
    transform: rotate( 360deg );
  }
}

@keyframes slide {
  0%, 15%, 100% {
    transform: translate(0%, 0%);
  }
  25%, 40% {
    transform: translate(0%, 100%);
  }
  50%, 65% {
    transform: translate(100%, 100%);
  }
  75%, 90% {
    transform: translate(100%, 0%);
  }
}
    

.link{
  display: block;
  position: relative;
  top: calc( 50% - var(--size)/2 );
  left: calc( 50% - var(--size)/2 );
  width: 100px;
  height: 100px;  
  border-radius: 10%;
  background: var(--blue);
  overflow: hidden;
 animation: mymove 5s infinite;
 -webkit-animation: mymove 5s infinite;/*Safari and Chrome*/
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}


		</style>
	</head>
	 <body>		
    <span class="loader"></span>
    <br>
    <br>
    <br>
    <br>
    <span class="link"></span>
	 








<title></title>
<style>
svg {
  width:300px;
  height:200px;
  ;
}


  
    g#svg1{animation-play-state:running;
           -webkit-animation:swinging 1s ease-in-out alternate infinite;
           -moz-animation:swinging 1s ease-in-out alternate infinite;}
    @keyframes swinging {
    0% {
       -webkit-transform: rotate(6deg);
       -webkit-transform-origin: top center;
       -moz-transform: rotate(6deg);
       -moz-transform-origin: top center;
       transform: rotate(6deg);
       transform-origin: top center;
    }
    100% {
       -webkit-transform: rotate(-6deg);
       -webkit-transform-origin: top center;
       -moz-transform: rotate(-6deg);
       -moz-transform-origin: top center;
       transform: rotate(-6deg);
       transform-origin: top center;
    }
}
<!--g#svg1{transform:translate(300px);}-->
  
body {
  background: #fff;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.motionblur {
  position: relative;
  width: 300px;
  height: 100px;
  -webkit-animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}

.box {
  position: absolute;
  left: calc(50% - 50px);
  width: 100px;
  height: 100%;
  background: #636a92;
  -webkit-animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.box::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 100%;
  background: linear-gradient(90deg, rgba(99, 106, 146, 0.5) 50%, rgba(99, 106, 146, 0) 100%);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95)-1.5s infinite;
          animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95)-1.5s infinite;
}
.box::after {
  content: '';
  position: absolute;
  left: -100px;
  width: 200px;
  height: 100%;
  background: linear-gradient(90deg, rgba(99, 106, 146, 0) 0%, rgba(99, 106, 146, 0.5) 50%);
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
          animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
}

@-webkit-keyframes scale {
  0% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.3, 1, 1);
            transform: scale3d(1.3, 1, 1);
  }
  55% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
  100% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
}

@keyframes scale {
  0% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.3, 1, 1);
            transform: scale3d(1.3, 1, 1);
  }
  55% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
  100% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
}
@-webkit-keyframes slide {
  0% {
    -webkit-transform: translate3d(-150px, 0, 0);
            transform: translate3d(-150px, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(150px, 0, 0);
            transform: translate3d(150px, 0, 0);
  }
}
@keyframes slide {
  0% {
    -webkit-transform: translate3d(-150px, 0, 0);
            transform: translate3d(-150px, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(150px, 0, 0);
            transform: translate3d(150px, 0, 0);
  }
}


</style>



<link rel="stylesheet" href="./SVG3_files/normalize.min.css">
<link rel="stylesheet" href="./SVG3_files/css"><link rel="stylesheet" href="./SVG3_files/style.css">



<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 444 444" style="enable-background:new 0 0 444 444;" xml:space="preserve">
  
 <g id="svg1">
<path style="fill:#FF697B;" d="M280.8,381.4H103.2c-39.2,0-71.2-32-71.2-71.2V132.6c0-39.2,32-71.2,71.2-71.2h177.6  c39.2,0,71.2,32,71.2,71.2v177.6C352,349.4,320,381.4,280.8,381.4z"></path>
<path style="fill:#FFFFFF;" d="M32,132.6v44.8h320v-44.8c0-39.2-32-71.2-71.2-71.2H103.2C64,61.4,32,93.4,32,132.6z"></path>
<path style="fill:#444B54;" d="M280.8,393.4H103.2c-46,0-83.2-37.2-83.2-83.2V132.6c0-46,37.2-83.2,83.2-83.2h177.6  c46,0,83.2,37.2,83.2,83.2v177.6C364,356.2,326.8,393.4,280.8,393.4z M103.2,73.4C70.4,73.4,44,99.8,44,132.6v177.6  c0,32.4,26.4,59.2,59.2,59.2h177.6c32.4,0,59.2-26.4,59.2-59.2V132.6c0-32.4-26.4-59.2-59.2-59.2H103.2z"></path>
<circle style="fill:#FFFFFF;" cx="192" cy="221.4" r="60"></circle>
  <path style="fill:#444B54;" d="M192,293.4c-39.6,0-72-32.4-72-72c0-6.8,5.2-12,12-12s12,5.2,12,12c0,26.4,21.6,48,48,48   s48-21.6,48-48s-21.6-48-48-48c-6.8,0-12-5.2-12-12s5.2-12,12-12c39.6,0,72,32.4,72,72S231.6,293.4,192,293.4z"></path>

  <path style="fill:#444B54;" d="M151.2,189c-0.8,0-1.6,0-2.4-0.4s-1.6-0.4-2.4-0.8c-0.8-0.4-1.6-0.8-2-1.2c-0.8-0.4-1.2-0.8-2-1.6   c-0.4-0.4-1.2-1.2-1.6-2c-0.4-0.8-0.8-1.2-1.2-2s-0.4-1.6-0.8-2.4c0-0.8-0.4-1.6-0.4-2.4c0-0.8,0-1.6,0.4-2.4   c0-0.8,0.4-1.6,0.8-2.4c0.4-0.8,0.8-1.6,1.2-2c0.4-0.8,0.8-1.2,1.6-2c0.4-0.4,1.2-1.2,2-1.6c0.8-0.4,1.2-0.8,2-1.2s1.6-0.4,2.4-0.8   c1.6-0.4,3.2-0.4,4.8,0c0.8,0,1.6,0.4,2.4,0.8c0.8,0.4,1.6,0.8,2,1.2c0.8,0.4,1.2,0.8,1.6,1.6c0.4,0.4,1.2,1.2,1.6,2   c0.4,0.8,0.8,1.2,1.2,2s0.4,1.6,0.8,2.4c0,0.8,0.4,1.6,0.4,2.4c0,0.8,0,1.6-0.4,2.4c0,0.8-0.4,1.6-0.8,2.4c-0.4,0.8-0.8,1.6-1.2,2   c-0.4,0.8-0.8,1.2-1.6,2c-0.4,0.4-1.2,1.2-1.6,1.6c-0.8,0.4-1.2,0.8-2,1.2s-1.6,0.4-2.4,0.8S152,189,151.2,189z"></path>

  <circle style="fill:#444B54;" cx="280" cy="133.4" r="16"></circle>
  <path style="fill:#444B54;" d="M12,394.6c-6.4,0-12-5.2-12-12s5.2-12,12-12l360-2l0,0c6.4,0,12,5.2,12,12s-5.2,12-12,12L12,394.6   L12,394.6z"></path>
  <path style="fill:#444B54;" d="M432,392.6c-3.2,0-6.4-1.2-8.4-3.6c-0.4-0.4-1.2-1.2-1.6-2s-0.8-1.2-1.2-2c-0.4-0.8-0.4-1.6-0.8-2.4   c0-0.8-0.4-1.6-0.4-2.4s0-1.6,0.4-2.4c0-0.8,0.4-1.6,0.8-2.4s0.8-1.6,1.2-2c0.4-0.8,0.8-1.2,1.6-2c0.4-0.4,1.2-1.2,1.6-1.6   c0.8-0.4,1.2-0.8,2-1.2c0.8-0.4,1.6-0.4,2.4-0.8c1.6-0.4,3.2-0.4,4.8,0c0.8,0,1.6,0.4,2.4,0.8s1.6,0.8,2,1.2   c0.8,0.4,1.2,0.8,1.6,1.6c2.4,2.4,3.6,5.2,3.6,8.4c0,0.8,0,1.6-0.4,2.4c0,0.8-0.4,1.6-0.8,2.4s-0.8,1.6-1.2,2   c-0.4,0.8-0.8,1.2-1.6,2C438.4,391.4,435.2,392.6,432,392.6z"></path>
</g>

</svg>
<svg id="svg2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 444 444" style="enable-background:new 0 0 444 444;" xml:space="preserve">
<path style="fill:#FF697B;" d="M280.8,381.4H103.2c-39.2,0-71.2-32-71.2-71.2V132.6c0-39.2,32-71.2,71.2-71.2h177.6  c39.2,0,71.2,32,71.2,71.2v177.6C352,349.4,320,381.4,280.8,381.4z"></path>
<path style="fill:#FFFFFF;" d="M32,132.6v44.8h320v-44.8c0-39.2-32-71.2-71.2-71.2H103.2C64,61.4,32,93.4,32,132.6z"></path>
<path style="fill:#444B54;" d="M280.8,393.4H103.2c-46,0-83.2-37.2-83.2-83.2V132.6c0-46,37.2-83.2,83.2-83.2h177.6  c46,0,83.2,37.2,83.2,83.2v177.6C364,356.2,326.8,393.4,280.8,393.4z M103.2,73.4C70.4,73.4,44,99.8,44,132.6v177.6  c0,32.4,26.4,59.2,59.2,59.2h177.6c32.4,0,59.2-26.4,59.2-59.2V132.6c0-32.4-26.4-59.2-59.2-59.2H103.2z"></path>
<circle style="fill:#FFFFFF;" cx="192" cy="221.4" r="60"></circle>
<g>
  <path style="fill:#444B54;" d="M192,293.4c-39.6,0-72-32.4-72-72c0-6.8,5.2-12,12-12s12,5.2,12,12c0,26.4,21.6,48,48,48   s48-21.6,48-48s-21.6-48-48-48c-6.8,0-12-5.2-12-12s5.2-12,12-12c39.6,0,72,32.4,72,72S231.6,293.4,192,293.4z"></path>
  <path style="fill:#444B54;" d="M151.2,189c-0.8,0-1.6,0-2.4-0.4s-1.6-0.4-2.4-0.8c-0.8-0.4-1.6-0.8-2-1.2c-0.8-0.4-1.2-0.8-2-1.6   c-0.4-0.4-1.2-1.2-1.6-2c-0.4-0.8-0.8-1.2-1.2-2s-0.4-1.6-0.8-2.4c0-0.8-0.4-1.6-0.4-2.4c0-0.8,0-1.6,0.4-2.4   c0-0.8,0.4-1.6,0.8-2.4c0.4-0.8,0.8-1.6,1.2-2c0.4-0.8,0.8-1.2,1.6-2c0.4-0.4,1.2-1.2,2-1.6c0.8-0.4,1.2-0.8,2-1.2s1.6-0.4,2.4-0.8   c1.6-0.4,3.2-0.4,4.8,0c0.8,0,1.6,0.4,2.4,0.8c0.8,0.4,1.6,0.8,2,1.2c0.8,0.4,1.2,0.8,1.6,1.6c0.4,0.4,1.2,1.2,1.6,2   c0.4,0.8,0.8,1.2,1.2,2s0.4,1.6,0.8,2.4c0,0.8,0.4,1.6,0.4,2.4c0,0.8,0,1.6-0.4,2.4c0,0.8-0.4,1.6-0.8,2.4c-0.4,0.8-0.8,1.6-1.2,2   c-0.4,0.8-0.8,1.2-1.6,2c-0.4,0.4-1.2,1.2-1.6,1.6c-0.8,0.4-1.2,0.8-2,1.2s-1.6,0.4-2.4,0.8S152,189,151.2,189z"></path>
  <circle style="fill:#444B54;" cx="280" cy="133.4" r="16"></circle>
  <path style="fill:#444B54;" d="M12,394.6c-6.4,0-12-5.2-12-12s5.2-12,12-12l360-2l0,0c6.4,0,12,5.2,12,12s-5.2,12-12,12L12,394.6   L12,394.6z"></path>
  <path style="fill:#444B54;" d="M432,392.6c-3.2,0-6.4-1.2-8.4-3.6c-0.4-0.4-1.2-1.2-1.6-2s-0.8-1.2-1.2-2c-0.4-0.8-0.4-1.6-0.8-2.4   c0-0.8-0.4-1.6-0.4-2.4s0-1.6,0.4-2.4c0-0.8,0.4-1.6,0.8-2.4s0.8-1.6,1.2-2c0.4-0.8,0.8-1.2,1.6-2c0.4-0.4,1.2-1.2,1.6-1.6   c0.8-0.4,1.2-0.8,2-1.2c0.8-0.4,1.6-0.4,2.4-0.8c1.6-0.4,3.2-0.4,4.8,0c0.8,0,1.6,0.4,2.4,0.8s1.6,0.8,2,1.2   c0.8,0.4,1.2,0.8,1.6,1.6c2.4,2.4,3.6,5.2,3.6,8.4c0,0.8,0,1.6-0.4,2.4c0,0.8-0.4,1.6-0.8,2.4s-0.8,1.6-1.2,2   c-0.4,0.8-0.8,1.2-1.6,2C438.4,391.4,435.2,392.6,432,392.6z"></path>
</g>
</svg>




<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 48 48">
  <path d="M5 38h38v4H5zm39.14-18.73c-.43-1.6-2.07-2.55-3.67-2.12L29.84 20 16.04 7.13l-3.86 1.04 8.28 14.35-9.94 2.66-3.93-3.09-2.9.78 3.64 6.31 1.53 2.65 3.21-.86 10.63-2.85 8.69-2.33 10.63-2.85c1.6-.43 2.55-2.07 2.12-3.67z"></path>
</svg>




<!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 80 80">
  <path d="M5 38h38v4H5zm39.14-18.73c-.43-1.6-2.07-2.55-3.67-2.12L29.84 20 15.04 7.13l-3.86 1.04 8.28 14.35-3.94 2.66-3.93-3.09-2.9.78 3.64 6.31 1.53 2.65 3.21-.86 10.63-2.85 8.69-2.33 10.63-2.85c1.6-.43 2.55-2.07 2.12-3.67z" style="fill:pink;stroke:black;/">

</path></svg>


<div class="motionblur">
<svg transform="scale(1.85186 1.85186)">
  <rect class="box" x="100" y="100" width="50" height="50">
  </rect>
  <animatetransform attributeName="transform" begin="0s" dur="3s" type="scale" from="1" to="2" repeatCount="indefinite"></animatetransform>
 
</svg></div>

<div class="motionblur">
  <div class="box"></div>
   </div>
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
      <path d="M24 4c2.21 0 4 1.79 4 4s-1.79 4-4 4-4-1.79-4-4 1.79-4 4-4zm18 14H30v26h-4V32h-4v12h-4V18H6v-4h36v4z"/>

</svg>


<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"  xmlns:xlink="http://www.w3.org/1999/xlink">
       <path d="M24 3c2 0 4 1.79 4 4s-1.7 4-4 4-4-1.7-4-4 1.7-4 4-4zm18 15H30v18h-4V24h-4v12h-4V18H6v-4h36v4z" stroke="red"
       stroke opacity="0.5" fill="pink"/>

      <a xlink:href="http://www.w3schools.com/svg/" target="_blank">
      <text x="3" y="45" style="fill:red;font-size: 5">   People</text>
            
      </text>
       
       </svg>



</body></html>